<template>
	<view class="order-list">
		<view class="card-item" v-for="(order, i) in orderList" :key="i">
			<!-- 订单头部 -->
			<u-cell class="card-header" :title="'订单ID：' + order.id" :label="`订单时间：${order.order_time}`">
				<view slot="value" style="display: flex;flex-direction: row;">
					<u-tag :text="orderStatus(order)" type="warning"></u-tag>					
					<view style="margin-left: 10px;" v-if="order.status != -1">
						<u-tag  text="取消订单" type="error"  @click="onClickOrderCancel(order.id)"></u-tag>
					</view>
					</view>
			</u-cell>

			<!-- 商品列表 -->
			<view class="goods-item" v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)">
				<u-row >
					<u-col span="3"><u--image :src="$fullUrl(item.product_pic)" width="80" height="80"></u--image></u-col>
					<u-col span="9">
						<u-cell :title="item.product_name" :label="item.product_spec" class="u-line-1" :border="false"></u-cell>
						<u-row style="padding-left: 20px;text-align: right;" justify="space-between">
							<u-col span="3">{{ item.price }}</u-col>
							<u-col span="2">X</u-col>
							<u-col span="3">{{ item.count }}</u-col>
							<u-col span="1">=</u-col>
							<u-col span="3">{{ item.price * item.count }}</u-col>
						</u-row>
					</u-col>
				</u-row>
			</view>
			

			<!-- 合计信息 -->
			<view class="amount">
				实付金额：
				<span style="color:red">¥{{ orderAmount(order) }}</span>
			</view>
		</view>
	</view>
</template>

<script>
import * as OrderAPI from '@/api/order.js';

export default {
	name: 'orderList',
	data() {
		return {
			orderList: [] //订单列表
		};
	},

	//生命周期钩子函数
	onLoad() {
		this.getOrderList();
	},
	onShow(){
		this.getOrderList();
	},

	methods: {
		//获取订单列表
		getOrderList() {
			OrderAPI.getOrderList().then(result => {
				console.log(result); //调式输出
				this.orderList = []; //清空数据
				this.orderList = result.data;
			});
		},

		//订单状态格式转换
		orderStatus(order) {
			let status = '未知';
			switch (order.status) {
				case 0:
					status = '未支付';
					break;
				case 1:
					status = '已支付';
					break;
				case -1:
					status = '已取消';
					break;
			}
			return status;
		},

		// 触发取消订单
		onClickOrderCancel(id) {
			OrderAPI.cancleOrderById(id).then(() => {
				this.getOrderList(); //刷新列表数据
			});
		},

		// 触发导航到订单详情（此时该路由功能还没有实现）
		onClick2OrderDetail(id) {
			uni.navigateTo({
				url: '/pages/order/OrderDetail?orderId=' + id
			});
		},

		//计算一个订单的总金额
		orderAmount(order) {
			let total = 0;
			order.detailList.forEach(item => {
				total += item.count * item.price;
			});
			return total.toFixed(2);
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.order-list {
	background-color: $u-bg-color;
}

.card-item {
	margin: 0 10px 10px 10px;
	padding: 10px;
	background-color: white;
	border-radius: 10px;
	font-size: 16px;
}

.card-header {
	font-size: 14px;
	font-weight: bolder;
}
.goods-item {
	border-bottom: 1px solid $u-border-color;
	padding: 10px 0;
}
.amount {
	margin-top: 10px;
	padding: 5px 5px;
	text-align: right;
	color: $u-content-color;
	font-weight: bold;
	background-color: $u-bg-color;
	font-size: 14px;
}

</style>
